<template>
    <div class="xzCont">
      <div class="detail">
          <div class="info">
            <p><strong>{{xing.title}}</strong>{{xing.desc}}</p>
            <p><strong>{{xing.huo}}</strong>{{xing.hot}}</p>
            <router-link to="/"><p>{{xing.text}}</p></router-link>
          </div>
          <div class="fortune">
            <h4>今日运势：<em class="m_star m_star_1"><em></em></em></h4>
            <router-link to="/"><p>{{xing.yunshi}}</p></router-link>
          </div>
          <ul class="pairLine">
              <li></li>
              <li>
                <router-link to="/">
                  <img src="https://m.xzw.com/static/public/images/prot_icon/xz/a/9.png">
                  <em>100</em>
                </router-link>
              </li>
              <li>
                <router-link to="/">
                  <img src="https://m.xzw.com/static/public/images/prot_icon/xz/a/1.png">
                  <em>100</em>
                </router-link>
              </li>
              <li>
              <router-link to="/">
                <img src="https://m.xzw.com/static/public/images/prot_icon/xz/a/3.png">
                <em>90</em>
              </router-link>
              </li>
              <li>
                <router-link to="/">
                  <img src="https://m.xzw.com/static/public/images/prot_icon/xz/a/7.png">
                  <em>90</em>
                </router-link>
              </li>
          </ul>
          <router-link to="/" class="moreBtn">更多狮子座详情</router-link>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'Common',
    props:{
      xing:Object
    }
  }
</script>

<style>
.xzCont {    background-size: .24rem;padding-bottom:.15rem;/* height:10.5rem;*/    overflow:hidden;}
.xzCont .loading {margin-top:3rem}
.xzCont .info {border-bottom:solid 1px #eee;padding:0 .16rem .16rem;}
.xzCont .info p {display:inline-block;font-size:.14rem;color:#999;}
.xzCont .info p strong {font-size:.18rem;color:#555;margin-right:.1rem;color:#4070f8;font-weight:600;}
.xzCont .info p:nth-child(2) {float:right;}
.xzCont a p span {color:#4070f8;}
.xzCont .info a {display:block;margin-top:.24rem;border-radius:.15rem;}
.xzCont .info a p {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;padding-left:0;line-height:.25rem;color:#555;font-size:.16rem;}
.xzCont .fortune {padding:.16rem .16rem;border-bottom:solid 1px #eee;}
.xzCont .fortune h4 {color:#d849c5;font-size:0.17rem;font-weight:600;}
.xzCont .m_star,.m_star em {vertical-align:top;}
.xzCont .fortune a {display:block;margin-top:0.02rem;border-radius:.15rem;}
.xzCont .fortune p {font-size:.16rem;line-height:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.xzCont .pairLine {background:url(https://m.xzw.com/static/public/images/pair.png) no-repeat 0.1rem center;background-size:.65rem;border-radius:.15rem;color:#fa6682;margin:.05rem .07rem;font-size:.23rem;display:flex;}
.xzCont .pairLine li {flex:1;text-align:center;padding-left:.1rem;}
.xzCont .pairLine li a {display:block;border-radius:50%;overflow:hidden;background:url(https://m.xzw.com/static/public/images/pdBG.png) no-repeat bottom center;background-size:82%;position:relative;}
.xzCont .pairLine li a img {width:78%;}
.xzCont .pairLine li a em {background:url(https://m.xzw.com/static/public/images/pdNum.png) no-repeat bottom center;background-size:82%;height:.3rem;line-height:.45rem;font-size:.14rem;font-weight:bold;color:#fff;position:absolute;left:0;bottom:0;width:100%;}
.xzCont a.moreBtn {display:block;background:-webkit-gradient(linear,68% 100%,68% 0%,from(#5382ff),to(#8bb4ff));-webkit-box-shadow:0 2px 6px rgba(89,135,255,0.4);box-shadow:0 2px 6px rgba(89,135,255,0.4);margin:.3rem auto 0;font-size:.15rem;width:1.87rem;height:0.33rem;line-height:0.33rem;text-align:center;color:#fff;border-radius:0.787rem;}
.m_star {display:inline-block;width:1.2rem;}
.m_star,.m_star em {background:url(https://m.xzw.com/static/public/images/icon_star.png) repeat 0 0;width:.96rem;height:0.24rem;background-size:0.24rem auto;}
.m_star em {width:auto;margin:0;background-position:0 -0.24rem;display:block;}

</style>
